.StepsComponent{
    width: 100%;
    background-color: #fff;
    padding: 0.75rem;
    box-sizing: border-box;
    .step_list{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        li {
            text-align: center;
            font-size: 6px;
            font-weight: 400;
            color: #333333;
            .step_line {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                height: 3rem;
                .step_icon {
                    display: block;
                    content: "";
                    width: 1.5rem;
                    height: 1.5rem;
                    background: #CBB486;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 2;
                    padding-top: 0.05rem;
                    box-sizing: border-box;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 500;
                    font-size: 1rem;
                    color: #FFFFFF;
                }
            }
            .step_line::before {
                display: block;
                height: 0.3rem;
                width: 50%;
                background-color: #CBB486;
                position: relative;
                z-index: 1;
                content: "";
            }
            .step_line::after {
                display: block;
                height: 0.3rem;
                width: 50%;
                background-color: #CBB486;
                position: relative;
                z-index: 1;
                content: "";
            }
            .noActive {
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                font-size: 0.75rem;
                color: #CBB486;
                margin-top: 0.1rem;
            }
            .active {
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 700;
                font-size: 0.88rem;
                color: #CBB486;
            }
            .step_percentage{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .step_num{
                    font-family: "PingFangSC-Regular ";
                    font-weight: 400;
                    font-size: 11px;
                    text-align: left;
                    color: #CBB486;
                    margin-right: 5.5px;
                }
                .step_block{
                    width: 22.5px;
                    height: 4.5px;
                    border-radius: 2.25px;
                    background: #e5e5e5;
                    .step_block2{
                        width: 15.5px;
                        height: 4.5px;
                        border-radius: 2.25px;
                        background: #CBB486;
                    }
                }
            }
        }
        li:first-child > .step_line::before {
            background-color: #ffffff;
        }
        li:last-child > .step_line::after {
            background-color: #ffffff;
        }
        .step_active ~ li .step_icon {
            background-color: #d8d8d8;
            border-color: #f7f7f7;
        }
        .step_active ~ li {
            color: #333;
        }
        .step_active ~ li .step_line::before {
            background-color: #ddd;
        }
        .step_active ~ li:not(:last-child) .step_line::after {
            background-color: #ddd;
        }
        .step_active:not(:last-child) .step_line::after {
            background-color: #ddd;
        }
    }
}